<template>
	<view>
		<view class="shiduan">
			<view :class="showIndex == 0 ? 'views' : ''" @click="changClick(0)">日</view>
			<view :class="showIndex == 1 ? 'views' : ''" @click="changClick(1)">周</view>
			<view :class="showIndex == 2 ? 'views' : ''" @click="changClick(2)">月</view>
			<view :class="showIndex == 3 ? 'views' : ''" @click="changClick(3)">年</view>
		</view>
		<!-- 选择时间 -->
		<view style="margin-top: 60rpx;">
			<view class="uni-padding-wrap" @click="dataClick">
				
					<view class="uni-title1">
						选择时间
					</view>
					<view class="uni-title2" v-if="showIndex != 1 ">
						<text v-if="showIndex == 0||showIndex == 1">{{year==""||month==''||day==''?'请选择时间': year+'年'+month+'月'+day+'日'}}</text>
						<text v-if="showIndex == 2">{{year==""||month==''?'请选择时间': year+'年'+month+'月'}}</text>
						<text v-if="showIndex == 3">{{year==""?'请选择时间': year+'年'}}</text>
					</view>
					<view class="uni-title2" v-if="showIndex == 1 ">
						<text v-if="showIndex == 0||showIndex == 1">{{year==""||month==''||day==''?'请选择时间': year+'年'+month+'月'+day+'日'}}</text>
						<text v-if="showIndex == 2">{{year==""||month==''?'请选择时间': year+'年'+month+'月'+day+'日'}}</text>
						<text v-if="showIndex == 3">{{year==""?'请选择时间': year+'年'+month+'月'+day+'日'}}</text>
					</view>
					<image src="/static/pages/index/right.png" class="topImg" mode=""></image>
					
				
			</view>
			
			<view class="uni-padding-wrapBox" v-if="visible">
				<view class="uni-padding-wrapBoxContent">
					<view class="titleBoxs">
						选择时间
					</view>
					<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column v-if="showIndex == 0||showIndex == 1||showIndex==2||showIndex==3">
							<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column v-if="showIndex == 0||showIndex == 1||showIndex==2">
							<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
						</picker-view-column>
						<picker-view-column v-if="showIndex == 0||showIndex == 1">
							<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
						</picker-view-column>
					</picker-view>
					<view class="conBtn">
						<view class="conBtn1" @click="quClick">
							取消
						</view>
						<view class="conBtn2" @click="queClick">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view style="margin-top: 60rpx;" v-if="showIndex==1">
			<view class="uni-padding-wrap" @click="dataClicksa">
				
					<view class="uni-title1">
						选择时间
					</view>
				
					<view class="uni-title2">
						<text v-if="showIndex == 0||showIndex == 1">{{yeara==""||montha==''||daya==''?'请选择结束时间': yeara+'年'+montha+'月'+daya+'日'}}</text>
						<text v-if="showIndex == 2">{{yeara==""||yeara==''?'请选择结束时间': yeara+'年'+montha+'月'+daya+'日'}}</text>
						<text v-if="showIndex == 3">{{yeara==""?'请选择结束时间': yeara+'年'+montha+'月'+daya+'日'}}</text>
					</view>
					<image src="/static/pages/index/right.png" class="topImg" mode=""></image>
					
				
			</view>
			
			<view class="uni-padding-wrapBox" v-if="visiblec">
				<view class="uni-padding-wrapBoxContent">
					<view class="titleBoxs">
						选择时间
					</view>
					<picker-view :indicator-style="indicatorStyle" :value="valuess" @change="bindChangesa" class="picker-view">
						<picker-view-column v-if="showIndex == 0||showIndex == 1||showIndex==2||showIndex==3">
							<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column v-if="showIndex == 0||showIndex == 1||showIndex==2">
							<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
						</picker-view-column>
						<picker-view-column v-if="showIndex == 0||showIndex == 1">
							<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
						</picker-view-column>
					</picker-view>
					<view class="conBtn">
						<view class="conBtn1" @click="quClicks">
							取消
						</view>
						<view class="conBtn2" @click="queClicks">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择门店 -->
		<view style="margin-top: 60rpx;">
			<view class="uni-padding-wrap" @click="dataClicks">
				
					<view class="uni-title1">
						选择店铺
					</view>
					<view class="uni-title2">
						{{shopValue==''?'请选择店铺':shopValue}}
					</view>
					<image src="/static/pages/index/right.png" class="topImg" mode=""></image>
			</view>
			<view class="uni-padding-wrapBox" v-if="visibles">
				<view class="uni-padding-wrapBoxContent">
					<view class="titleBoxs">
						选择店铺
					</view>
					<picker-view :indicator-style="indicatorStyle" :value="values"  @change="bindChanges" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item, index) in array" :key="index">{{ item }}</view>
						</picker-view-column>
					</picker-view>
					<view class="conBtn">
						<view class="conBtn1" @click="qusClick">
							取消
						</view>
						<view class="conBtn2" @click="quesClick">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 70rpx;">
			
		
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr >
				<uni-th width="160" style="color: #303133;" align="center">店铺名称</uni-th>
				<uni-th width="160" style="color: #303133;" align="center">区域</uni-th>
				<uni-th width="160" style="color: #303133;" align="center">时间</uni-th>
				<uni-th width="160" style="color: #303133;" align="center">线索</uni-th>
				<uni-th width="160" style="color: #303133;" align="center">销售</uni-th>
				<uni-th width="160" style="color: #303133;" align="center">A卡</uni-th>
				<uni-th width="160" style="color: #303133;" align="center">订单</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item, index) in list" :key="index">
				<uni-td>
					<view class="li_1">
						<view class="li_1_2">{{ item.shop_name }}</view>
					</view>
				</uni-td>
				<uni-td>
					<view class="li_3">{{ item.regional_name }}</view>
				</uni-td>
				<uni-td>
					<view class="li_3">{{ item.createtime }}</view>
				</uni-td>
				<uni-td>
					<view class="li_3">{{ item.name }}</view>
				</uni-td>
				<uni-td>
					<view class="li_3">{{ item.remark }}</view>
				</uni-td>
				<uni-td>
					<view class="li_3">{{ item.mobile }}</view>
				</uni-td>
				<uni-td>
					<view class="li_3">{{ item.cat_type }}</view>
				</uni-td>
				<!-- createtime -->
			</uni-tr>
		</uni-table>
		</view>
	</view>
</template>

<script>
import { regionexaminecchakan,regionStoreList,shopSees} from '@/request/api.js';
export default {
	data() {
		const date = new Date();
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		const days = [];
		const day = date.getDate();
		for (let i = 1990; i <= date.getFullYear(); i++) {
			years.push(i);
		}
		for (let i = 1; i <= 12; i++) {
			months.push(i);
		}
		for (let i = 1; i <= 31; i++) {
			days.push(i);
		}
		return {
			type: 1,
			page: 1,
			pageShow: false,
			list: [],
			showIndex: 0,
			title: 'picker-view',
			years,
			year:'',
			months,
			month:'',
			days,
			day:'',
			value: [9999, month - 1, day - 1],
			visible: false,
			indicatorStyle: `height: 50px;`,
			val:'',
			array: [],
			values:'',
			visibles:false,
			shopValue:'',
			vals:0,
			yeara:'',
			montha:'',
			daya:'',
			visiblec:false,
			valuess:[9999, month - 1, day - 1],
			valss:'',
			distributor_id:'',
			timeShuju:'' ,//年数据
			shopShuju:'',//选择店铺
			weekShuju:'' //周的结束时间
		};
	},
	onLoad() {
		this.init();
	},
	onReachBottom() {
		if (pageShow) {
			this.init();
		}
	},
	methods: {
		init() {
			let _this = this;
				let data = {
					page: _this.page,
					type: _this.type,
					regional_id: uni.getStorageSync('regionMessage').id,
					time:this.timeShuju==''?'':this.timeShuju,
					distributor_id:this.shopShuju==''?'':this.shopShuju
				};
				shopSees(data).then(res => {
					if (res.code == 1) {
						// console.log(res)
						if (res.data.list.data.length > 0) {
							_this.list = _this.list.concat(res.data.list.data);
							_this.page++;
							_this.pageShow = true;
							
						} else {
							uni.showToast({
								title:"没有更多信息了",
								icon:"none"
							})
							_this.pageShow = false;
						}
					}
				});
			regionStoreList()
				.then(res => {
					if (res.code == 1) {
						_this.array=[]
						// console.log(res, '123123123123');
						_this.arrayS=res.data;
						
						for(let i=0;i<res.data.length;i++){
							// console.log(res.data[i])
							_this.array.push(res.data[i].stores)
						}
						_this.arrayS.forEach((item,indexs)=>{
							if(itme.id==_this.mendianId){
								_this.index=indexs
							}
						})
					}
				})
				.catch(err => {});
		},
		//周筛选
		weekClik(){
			let _this = this;
			let arrWeek =[]
			arrWeek.push(this.timeShuju);
			arrWeek.push(this.weekShuju);
			let a = JSON.stringify(arrWeek.join(',')) 
			let obj = {
				page: _this.page,
				type: _this.type,
				regional_id: uni.getStorageSync('regionMessage').id,
				time:a,
				distributor_id:this.shopShuju==''?'':this.shopShuju
			}
			shopSees(obj).then(res => {
				if (res.code == 1) {
					// console.log(res)
					if (res.data.list.data.length > 0) {
						_this.list = _this.list.concat(res.data.list.data);
						_this.page++;
						_this.pageShow = true;
						
					} else {
						uni.showToast({
							title:"没有更多信息了",
							icon:"none"
						})
						_this.pageShow = false;
					}
				}
			});
		},
		changClick(type) {
			this.showIndex = type;
			this.list = [];
			this.page = 1;
			this.year='';
			this.month='';
			this.day='';
			this.yeara='';
			this.montha='';
			this.daya='';
			this.timeShuju='';
			this.shopValue='';
			this.shopShuju='';
			if (this.showIndex == 0) {
				this.type = 1;
				this.init();
			} else if (this.showIndex == 1) {
				this.type = 2;
				this.init();
			} else if(this.showIndex == 2){
				this.type = 3;
				this.init();
			}else if(this.showIndex == 3){
				this.type = 4;
				this.init();
			}
		},
		bindChange: function(e) {
			this.val = e.detail.value;
			console.log(this.val)
			
		},
		//结束时间
		bindChangesa(e){
			this.valss = e.detail.value;
		},
		dataClick() {
			this.visible = true;
		},
		dataClicksa() {
			this.visiblec = true;
		},
		quClicks(){
			this.visiblec = false;
		},
		queClicks(){
			this.visiblec = false;
			if(this.yeara==''||this.montha==''||this.daya==''){
				let ads = new Date();
				this.yeara = ads.getFullYear();
				this.montha = ads.getMonth() + 1;
				this.daya = ads.getDate();
				this.weekShuju=this.yeara+'-'+this.montha+'-'+this.daya;
				if(this.timeShuju==''){
					uni.showToast({
						title:"请先选择开始时间",
						icon:"none"
					})
					return
				}else{
					this.list = [];
					this.page = 1;
					this.weekClik()
				}
			}else{
				this.yeara = this.years[this.valss[0]];
				this.montha = this.months[this.valss[1]];
				this.daya = this.days[this.valss[2]];
				this.weekShuju = this.yeara+'-'+this.montha+'-'+this.daya;
				if(this.timeShuju==''){
					uni.showToast({
						title:"请先选择开始时间",
						icon:"none"
					})
					return
				}else{
					this.list = [];
					this.page = 1;
					this.weekClik()
				}
			}
			
			
		},
		quClick(){
			this.visible = false;
		},
		
		queClick(){
			this.visible = false;
			
			this.list = []
			this.page = 1
			if (this.showIndex == 0) {
				if(this.year==''||this.month==''||this.day==''){
					let ads = new Date();
					this.year = ads.getFullYear();
					this.month = ads.getMonth() + 1;
					this.day = ads.getDate();
					this.timeShuju=this.year+'-'+this.month+'-'+this.day
					this.init()
				}else{
					this.year = this.years[this.val[0]]
					this.month = this.months[this.val[1]]
					this.day = this.days[this.val[2]]
					this.timeShuju=this.year+'-'+this.month+'-'+this.day
					this.init()
				}
				
			}else if(this.showIndex == 1){
				if(this.year==''||this.month==''||this.day==''){
					let ads = new Date();
					this.year = ads.getFullYear();
					this.month = ads.getMonth() + 1;
					this.day = ads.getDate();
					this.timeShuju=this.year+'-'+this.month+'-'+this.day
					if(this.weekShuju==''){
						uni.showToast({
							title:"请选择结束时间",
							icon:"none"
						})
					}else if(this.weekShuju !=''&&this.timeShuju!=''){
						this.weekClik()
					}
				}else{
					this.year = this.years[this.val[0]]
					this.month = this.months[this.val[1]]
					this.day = this.days[this.val[2]]
					this.timeShuju=this.year+'-'+this.month+'-'+this.day
			
					if(this.weekShuju==''){
						uni.showToast({
							title:"请选择结束时间",
							icon:"none"
						})
					}else if(this.weekShuju !=''&&this.timeShuju!=''){
						this.weekClik()
					}
				}
			
				
			}else if(this.showIndex == 2){
				
				if(this.year==''||this.month==''){
					let ads = new Date();
					this.year = ads.getFullYear();
					this.month = ads.getMonth() + 1;
					this.timeShuju=this.year+'-'+this.month
					this.init()
				}else{
					this.year = this.years[this.val[0]]
					this.month = this.months[this.val[1]]
					this.timeShuju=this.year+'-'+this.month
					this.init()
				}
			}else if(this.showIndex == 3){
				if(this.year==''){
					let ads = new Date();
					this.year = ads.getFullYear();
			
					this.timeShuju=this.year
					this.init()
				}else{
					this.year = this.years[this.val[0]]
					this.timeShuju=this.year
					this.init()
				}
			}
		},
		bindChanges: function(e) {
			this.vals = e.detail.value[0];
		},
		dataClicks(){
			this.visibles = true;
			this.vals=0
		},
		qusClick(){
			this.visibles = false;
		},
		quesClick(){
			let _this = this
			_this.visibles = false;
			_this.array.forEach((item,index)=>{
				if(_this.vals==index){
					_this.shopValue = item
				}
			})
			if(this.vals==0){
				console.log(_this.shopShuju)
				_this.arrayS.forEach((item,indexs)=>{
					if(this.vals==indexs){
						_this.shopShuju = item.id
					}
				})
				if(this.showIndex == 1){
					this.weekClik()
				}else{
					_this.init()
				}
				
			}else{
				_this.arrayS.forEach((item,indexs)=>{
					if(this.vals==indexs){
						_this.shopShuju = item.id
					}
				})
				if(this.showIndex == 1){
					this.weekClik()
				}else{
					_this.init()
				}
			}
		}
	}
};
</script>

<style lang="scss">
.zong {
}
.user_list {
	width: 1800rpx;
	.li {
		display: flex;
		text-align: center;
		width: 1400rpx;
		align-items: center;
		.li_3 {
			width: 200rpx;
			flex-shrink: 0;
		}
		.li_1 {
			display: flex;
			align-items: center;
			width: 200rpx;
			flex-shrink: 0;
			.li_1_1 {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				background-color: pink;
			}
		}
	}
}
.tit_list {
	display: flex;
	align-items: center;
	width: 1400rpx;
	view {
		width: 200rpx;
		flex-shrink: 0;
		text-align: center;
	}
}
.shiduan {
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 30rpx 0;
	view {
		
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		line-height: 60rpx;
		width: 120rpx;
		height: 60rpx;
		background: #94AFF4;
		border-radius: 8rpx;
	}
	.views {
		width: 120rpx;
		height: 60rpx;
		background: #1855F6;
		border-radius: 8rpx;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		line-height: 60rpx;
		
	}
}
.picker-view {
	width: 750rpx;
	height: 400rpx;
	margin-top: 20rpx;
	background-color: #ffffff;
}
.item {
	height: 50px;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #ffffff;
}
.uni-padding-wrap{
	width: 100%;
	display: flex;
	justify-content:space-between;
	border-bottom: 1px #FBFBFB solid;
	padding-bottom: 20rpx;
	.uni-title1{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #303133;
		margin-left: 24rpx;
	}
	.uni-title2{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #909399;
	}
	.topImg{
		width: 22rpx;
		height: 30rpx;
		margin-right: 45rpx;
	}
	
}
.uni-padding-wrapBox {
	width: 100%;
	height: 100vh;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 99;
	
	.uni-padding-wrapBoxContent {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 9999999999;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 80rpx;
		.titleBoxs {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #313233;
			margin-top: 40rpx;
		}
		.conBtn{
			width: 100%;
			margin-top: 60rpx;
			display: flex;
			justify-content: space-around;
			.conBtn1{
				width: 180rpx;
				height: 60rpx;
				border: 2rpx solid #1855F6;
				border-radius: 30rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1855F6;
				line-height: 60rpx;
				text-align: center;
			}
			.conBtn2{
				width: 180rpx;
				height: 60rpx;
				background: #1855F6;
				border-radius: 30rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
}
</style>
